<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
    <title>短链管理修改</title>
    <link rel="icon" th:href="@{/images/favicon.ico}" type="image/ico">
    <meta http-equiv="description" content="bluewind-shorturl在线短链生成"/>
    <meta http-equiv="keywords" content="蓝风软件,短链生成,在线短链生成,长链转短链"/>

    <link th:href="@{/css/bootstrap.min.css}" rel="stylesheet">
    <link th:href="@{/css/materialdesignicons.min.css}" rel="stylesheet">
    <link th:href="@{/css/style.min.css}" rel="stylesheet">
    <link th:href="@{/css/public.css}" rel="stylesheet">
    <!--日期选择插件-->
    <link rel="stylesheet" th:href="@{/js/bootstrap-datepicker/bootstrap-datepicker3.min.css}">

    <link th:href="@{/js/bootstrap-validator/css/bootstrapValidator.css}" rel="stylesheet">
</head>

<body>

<div class="container-fluid p-t-15">
    <div class="row">
        <div class="col-md-12">
            <div class="card">
                <div class="card-header">
                    <h4>短链修改</h4>
                </div>

                <div class="card-body">
                    <form id="addForm" class="form-horizontal">
                        <input type="hidden" name="id" id="id" th:value="${urlInfo.id}">

                        <div class="form-group">
                            <label class="col-md-3 control-label is-required" for="lurl">原始链接：</label>
                            <div class="col-md-7">
                                <p class="form-control-static" th:text="${urlInfo.lurl}"></p>
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="col-md-3 control-label is-required" for="surl">短链接：</label>
                            <div class="col-md-7">
                                <p class="form-control-static" th:text="${urlInfo.surl}"></p>
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="col-md-3 control-label is-required" for="status">状态：</label>
                            <div class="col-md-7">
                                <select class="form-control selectpicker" id="status" name="status" th:value="${urlInfo.status}">
                                    <option value="0" th:selected="(${urlInfo.status} eq '0')">启用</option>
                                    <option value="1" th:selected="(${urlInfo.status} eq '1')">禁用</option>
                                </select>
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="col-md-3 control-label is-required" for="expireDate">过期日期：</label>
                            <div class="col-md-7">
                                <input type="text" class="form-control js-datepicker" data-date-format="yyyy-mm-dd" name="expireDate"
                                       id="expireDate" placeholder="请选择过期日期" th:value="${urlInfo.expire_time}">
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="col-md-3 control-label" for="note">备注</label>
                            <div class="col-md-7">
                                <textarea class="form-control" id="note" name="note" placeholder="请输入备注" th:text="${urlInfo.note}"></textarea>
                            </div>
                        </div>


                        <div class="form-group">
                            <div class="col-md-9 col-md-offset-3">
                                <button class="btn btn-primary" id="submitForm">提交</button>
                            </div>
                        </div>

                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript" th:src="@{/js/jquery.min.js}"></script>
<script type="text/javascript" th:src="@{/js/bootstrap.min.js}"></script>
<!--表单校验插件-->
<script type="text/javascript" th:src="@{/js/bootstrap-validator/js/bootstrapValidator.js}"></script>
<!--消息提醒插件-->
<script type="text/javascript" th:src="@{/js/coco-message/coco-message.js}"></script>
<!--弹窗插件-->
<script type="text/javascript" th:src="@{/js/layer/layer.min.js}"></script>
<!--日期选择插件-->
<script type="text/javascript" th:src="@{/js/bootstrap-datepicker/bootstrap-datepicker.min.js}"></script>
<script type="text/javascript" th:src="@{/js/bootstrap-datepicker/locales/bootstrap-datepicker.zh-CN.min.js}"></script>
<!--公共组件-->
<script type="text/javascript" th:src="@{/js/main.min.js}"></script>
<script type="text/javascript" th:src="@{/js/public.js}"></script>

<script type="text/javascript" th:inline="javascript">
    AjaxUtil.ctx = /*[[@{/}]]*/'';

    $(document).ready(function () {
        $('#addForm').bootstrapValidator({
            fields: {
                status: {validators: {notEmpty: {message: '状态不能为空'}}},
                expireDate: {validators: {notEmpty: {message: '过期时间不能为空'}}}
            }
        });


        // 提交按钮
        $("#submitForm").click(function () {
            var bv = $('#addForm').data('bootstrapValidator');
            bv.validate();
            if (bv.isValid()) {
                console.log('通过校验')

                var param = $('#addForm').serialize() + '&surl=' + [[${urlInfo.surl}]];
                AjaxUtil.post({
                    url: AjaxUtil.ctx + "tenant/url/edit",
                    data: param,
                    success: function (res) {
                        if (res.code === 200) {
                            Message.success(1000, res.msg, function () {
                                var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
                                parent.layer.close(index);
                            });
                        } else {
                            Message.error(res.msg, 1000);
                        }
                    },
                    error: function (error) {
                        Message.error(error, 1000);
                    }
                });
            } else {
                console.log('未通过校验')
            }
        });

    });

</script>
</body>
</html>